// object  => DOM元素  ts dom注意原型链属性   oInputText！.value
// 有没有value属性 至少断言成htmlinputelement oInputText.value 方可

// 获取dom ，如果不成功 null 如果成功 =》Element
/**
 * TS 要看类型下有什么属性
 */

interface ITodo {
    id: number;
    content: string;
    completed: boolean;
}
// interface ITodo {// 合并
//     name: string;
// }
type TypeTarget = HTMLInputElement | HTMLButtonElement
type TypeContentMap ={
    [key:number]: HTMLSpanElement;
}
enum ElementType{
    CHECKBOX="HTMLInputElement",
    BUTTON="HTMLButtonElement"
}

const oInputText = <HTMLInputElement>document.querySelector('#inputText');
const oAddBtn = document.querySelector('#addBtn');
const oTodoList = document.querySelector('#todoList');

const eventMap = new Map([
    [oAddBtn, handleAddBtnClick],
    [oTodoList, handleListClick]
]);

const init =() =>{
    bindEvent();
}
const contentMap:TypeContentMap = {}
init()
function bindEvent(){
    eventMap.forEach(( handler,el) => el?.addEventListener('click',handler,false) );
   
}
function handleAddBtnClick(){
    const inputText = oInputText.value;
    if(!inputText.trim().length) return;

    const oTodoItem = createTodoItem({
        id: new Date().getTime(),
        content: inputText,
        completed: false
    });
    oTodoList?.appendChild(oTodoItem);
    oInputText.value = '';
}
function handleListClick(e:Event){
    const target =<TypeTarget> e.target;
    const type = getObjectType<TypeTarget>(target); // checkbox button  
    if(type === ElementType.CHECKBOX || type === ElementType.BUTTON){// 判断是否为checkbox 或者 button
        const id = Number(target.dataset.id); // 获取id
     switch(type){
            case ElementType.CHECKBOX:
                setContentStyle(id,(<HTMLInputElement>target).checked);
                break;
            case ElementType.BUTTON:
                removeTodoItem(id,<HTMLElement>target.parentNode);
                break;
            default:
                break;
        }
    }
}
function getObjectType<T>(value:T){
    // [object ...] => ...HTMLInputElement ||  HTMLButtonElement
    return Object.prototype.toString.call(value).match(/\[object (.+?)\]/)?.[1];
}
/**
 * 
 * @param id:number;
 * @param content:  string;
 * @param completed: boolean;
 * @returns 
 */
function createTodoItem({id,content,completed}:ITodo){
    const oTodoItem = document.createElement('li');
    /**
     * checkbox => id => content进行样式修改
     * content
     * removeBtn
     */
    oTodoItem.appendChild(createCheckBox(id, completed));
    oTodoItem.appendChild(createContent(id, content));
    oTodoItem.appendChild(createRemoveBtn(id));
    return oTodoItem;
}
function createCheckBox(id:number, completed:boolean){
    const oCheckBox = document.createElement('input');
    oCheckBox.type = 'checkbox';
    oCheckBox.checked = completed;
    oCheckBox.dataset.id = id.toString();
    return oCheckBox;
}
function createContent(id:number,content:string){
    const oContent = document.createElement('span');
    oContent.innerText = content;
    contentMap[id] = oContent;
    return oContent;
}
function createRemoveBtn(id:number){
    const oRemoveBtn = document.createElement('button');
    oRemoveBtn.innerText = '删除';
    oRemoveBtn.dataset.id = id.toString();
    return oRemoveBtn;
}
function removeTodoItem(id:number,item:HTMLElement):void {
    oTodoList?.removeChild(item);
    // contentMap.remove(id)
    delete contentMap[id];
}
function setContentStyle(id:number,completed:boolean){
    contentMap[id].style.textDecoration = completed ? 'line-through' : '';
}